<template>
  <view class="pages">
    <h-nav-bar-yun
      backgroundColor="#F5F0FC"
      fixed
      textAlign="left"
      isCenter="auto"
      @clickLeft="toBack"
    >
      <view class="topCen" @click="timeShow = true">
        <view class="head_data">
          <view class="uni-input"
            >{{ formatDate(new Date(dateTime), 'MM月DD日') }} {{ mealType[mealIndex]?.name }}
            <image src="@/static/baby/sanjiao.png" class="head_data_img"></image>
          </view>
        </view>
      </view>
    </h-nav-bar-yun>
    <view class="section">
      <view
        class="sec_inp"
        @click="
          navigateTo(
            '/pregnancys/weight-management/diet-record/search?dateTime=' +
              dateTime +
              '&meal=' +
              (mealIndex + 1),
          )
        "
        ><image src="@/static/yunchan/weight/search.png"></image>请输入食物名称</view
      >
      <view class="sec_box">
        <view class="sec_alide">
          <view
            class="sec_alide_list"
            :class="alideIndex == index ? 'sec_alide_list_act' : ''"
            v-for="(item, index) in articleType"
            :key="index"
            @click="bindAlide(index)"
            >{{ item?.cate_name }}</view
          >
          <h-line height="130"></h-line>
        </view>
        <view class="sec_article">
          <view class="sec_article_title" v-if="isUser == 2"
            >自定义食物
            <view
              class="sec_article_title_add"
              @click="navigateTo('/pregnancys/weight-management/custom-add?type=meal')"
            >
              <image src="@/static/yunchan/weight/bb.png"></image>添加自定义食物
            </view>
          </view>
          <view class="sec_article_title" v-else-if="isUser == 1">我的食物</view>
          <view class="sec_article_title" v-else>{{ articleType[alideIndex]?.cate_name }}</view>
          <view
            class="sec_article_list"
            v-for="(item, index) in itemList"
            :key="index"
            :id="index"
            @touchstart="touchStart"
            @touchend="touchEndTab"
          >
            <image :src="item?.icon" class="sec_article_list_img"></image>
            <view class="sec_article_list_box">
              <view class="sec_article_list_box_l">
                <view class="sec_article_list_box_l_t">{{ item?.name }}</view>
                <view class="sec_article_list_box_l_b"
                  >{{ item?.num_one || 1 }}{{ item?.unit_one }}</view
                >
              </view>
              <view class="sec_article_list_box_r">
                <image src="@/static/yunchan/weight/aa.png" v-show="item?.is_add"></image>
                <image
                  src="@/static/yunchan/weight/bb.png"
                  v-show="!item?.is_add"
                  @click="toCheck(index, 1)"
                ></image>
              </view>
              <view
                class="sec_article_list_box_del"
                v-show="item?.del && (isUser == 2 || isUser == 1)"
                @click="toDel(index, item)"
                >删除</view
              >
            </view>
          </view>
          <view class="sec_article_none" v-show="itemList?.length == 0">
            <image src="@/static/yunchan/weight/none.png"></image>
            <view class="sec_article_none_text">暂无信息，快去记录吧～</view>
          </view>

          <h-line height="130"></h-line>
        </view>
      </view>
    </view>
    <view class="foot" :style="{ zIndex: 100000000 }">
      <view class="foot_l" @click="toSeeRecord">
        <view class="foot_l_num" v-show="recordList?.length">{{ recordList?.length }}</view>
        <image
          class="foot_l_img"
          v-show="recordList?.length"
          :src="mealType[mealIndex]?.icons"
        ></image>
        <image
          class="foot_l_img"
          v-show="recordList?.length == 0"
          :src="mealType[mealIndex]?.icon"
        ></image>
        <view class="foot_l_text">{{ mealType[mealIndex]?.name }}</view>
        <image class="foot_l_jian" src="@/static/yunchan/weight/shang.png"></image>
      </view>
      <view class="foot_r">
        <view class="foot_btn" @click="submit">查看记录</view>
      </view>
    </view>

    <u-popup :show="addShow" mode="bottom" @close="addShow = false" closeable :round="10">
      <view class="add_box">
        <view class="topCen" @click="openRecordTime">
          <view class="head_data" style="font-size: 28rpx">
            <view class="uni-input">
              {{ formatDate(new Date(recordTime), 'MM月DD日') }}
              {{ mealType[recordMealIndex]?.name }}
              <image
                src="@/static/baby/sanjiao.png"
                class="head_data_img"
                style="top: -4rpx"
              ></image>
            </view>
          </view>
        </view>
        <h-num-keyboard
          type="meal"
          :title="addDetail?.name"
          :imgUrl="addDetail?.icon"
          :num="mealNum"
          :unit="addDetail?.unit_one"
          @bind="bindNum"
        ></h-num-keyboard>
      </view>
      <h-line height="150"></h-line>
    </u-popup>
    <!--头部切换日期和餐项-->
    <u-popup :show="timeShow" mode="bottom" @close="timeShow = false" closeable :round="10">
      <view class="time_box">
        <view class="time_box_title">
          {{ formatDate(new Date(dateTime), 'MM月DD日') }} {{ mealType[mealIndex]?.name }}
        </view>
        <picker-view
          :value="changeTime"
          :indicator-style="indicatorStyle"
          @change="bindChangeTime"
          class="picker-view"
          indicator-class="picker_check"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in articleList">{{ item?.label }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in mealType" :key="index">{{
              item?.name
            }}</view>
          </picker-view-column>
        </picker-view>
        <view class="time_box_btn" @click="toBind">确定</view>
      </view>
      <h-line height="150"></h-line>
    </u-popup>
    <!--添加记录头部切换日期和餐项-->
    <u-popup :show="headTimeShow" mode="bottom" @close="closeTimeShow" closeable :round="10">
      <view class="time_box">
        <view class="time_box_title"
          >{{ formatDate(new Date(recordTime), 'MM月DD日') }}
          {{ mealType[recordMealIndex]?.name }}</view
        >
        <picker-view
          :value="changeRecordTime"
          :indicator-style="indicatorStyle"
          @change="bindRecordChangeTime"
          class="picker-view"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in articleList" :key="index">{{
              item?.label
            }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in mealType" :key="index">{{
              item?.name
            }}</view>
          </picker-view-column>
        </picker-view>
        <view class="time_box_btn" @click="toBindRecord">确定</view>
      </view>
      <h-line height="150"></h-line>
    </u-popup>
    <u-popup :show="recordShow" mode="bottom" @close="recordShow = false" closeable :round="10">
      <view class="record_box">
        <view class="record_box_alide">
          <view
            class="record_box_alide_list"
            :class="recordIndex == index ? 'record_box_alide_list_act' : ''"
            v-for="(item, index) in mealType"
            :key="index"
            @click="bindRecord(index, item)"
            >{{ item?.name }}</view
          >
        </view>
        <view class="record_box_article">
          <view class="record_box_article_title" v-show="recordList.length > 0"
            >共{{ recordList?.length }}条记录</view
          >
          <view class="record_box_article_box">
            <view
              class="record_box_article_list"
              v-for="(item, index) in recordList"
              :key="index"
              :id="index"
            >
              <image :src="item?.icon" class="record_box_article_list_img"></image>
              <view class="record_box_article_list_box">
                <view class="record_box_article_list_box_l">
                  <view class="record_box_article_list_box_l_t">{{ item?.name }}</view>
                  <view class="record_box_article_list_box_l_b"
                    >{{ item?.num }}{{ item?.unit }}</view
                  >
                </view>
                <view class="record_box_article_list_box_r" @click="toDelRecord(index, item)">
                  <image src="@/static/yunchan/weight/del.png"></image>
                </view>
              </view>
            </view>
            <view class="record_box_article_box_none" v-show="recordList?.length == 0">
              <image src="@/static/yunchan/weight/aaa.png"></image>
              <view class="record_box_article_box_none_text">还没有食物哦~</view>
            </view>
          </view>
        </view>
        <!--<view class="foot">
					<view class="foot_l" @click="toSeeRecord">
						<view class="foot_l_num" v-show="recordList.length">{{recordList?.length}}</view>
						<image class="foot_l_img" v-show="recordList.length" :src="mealType[recordIndex]?.icons"></image>
						<image class="foot_l_img" v-show="recordList.length==0" :src="mealType[recordIndex]?.icon"></image>
						<view class="foot_l_text">{{mealType[recordIndex]?.name}}</view>
						<image class="foot_l_jian" src="@/static/yunchan/weight/xia.png"></image>
					</view>
					<view class="foot_r">
						<view class="foot_btn" @click="redirectTo('/pregnancy/weight-management/diet-record/foods-and-sport?time='+dateTime)">查看记录</view>
					</view>
				</view>-->
      </view>
    </u-popup>
    <h-login ref="login" @updateInfo="updateInfo"></h-login>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { formatDate } from '@/utils/utils'
import { navigateTo, showToast, navigateBack, redirectTo } from '@/utils'
import dayjs from 'dayjs'
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onReady,
  onShow,
  onPageScroll,
  onUnload,
  onHide,
  onBackPress,
} from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
import {
  ycDietCategory,
  ycDietDateList,
  ycDietAddDiet,
  ycDietDailyDiet,
  ycDietDelRecord,
  ycDietDelCustomProject,
  ycDietRecordStartDate,
} from '@/api/weight/index.js'
const login = ref(null) // 登录组件实例
const store = useMemberStore()
var token = store?.token
const timeShow = ref(false)
const alideIndex = ref(0)
const articleList = ref([])
const dateTime = ref(formatDate(new Date(), 'YYYY-MM-DD'))
const articleType = ref([])
const recordList = ref([])
const mealType = ref([
  {
    name: '早餐',
    icon: '/static/yunchan/weight/foot/a.png',
    icons: '/static/yunchan/weight/foot/aa.png',
    number: 10,
  },
  {
    name: '午餐',
    icon: '/static/yunchan/weight/foot/b.png',
    icons: '/static/yunchan/weight/foot/ba.png',
    number: 16,
  },
  {
    name: '晚餐',
    icon: '/static/yunchan/weight/foot/c.png',
    icons: '/static/yunchan/weight/foot/ca.png',
    number: 0,
  },
  {
    name: '早加餐',
    icon: '/static/yunchan/weight/foot/d.png',
    icons: '/static/yunchan/weight/foot/da.png',
    number: 20,
  },
  {
    name: '午加餐',
    icon: '/static/yunchan/weight/foot/d.png',
    icons: '/static/yunchan/weight/foot/da.png',
    number: 4,
  },
  {
    name: '晚加餐',
    icon: '/static/yunchan/weight/foot/d.png',
    icons: '/static/yunchan/weight/foot/da.png',
    number: 2,
  },
])
const customList = ref([])
const myList = ref([])
const itemList = ref([])
const mealRecordNum = ref(0)
const changeTime = ref([0, 0])
const changeRecordTime = ref([0, 0])
const indicatorStyle = ref('height: 85rpx;color:#000;')
const recordShow = ref(false)
const recordIndex = ref('')
const addShow = ref(false)
const addDetail = ref({})
const mealNum = ref(0)
const addIndex = ref(0)
const mealIndex = ref(0)
const recordTime = ref('')
const recordMealIndex = ref(0)
const headTimeShow = ref(false)
const newDateTime = ref(formatDate(new Date(), 'YYYY-MM-DD'))
var props = defineProps({
  mealIndex: String,
  time: String,
  isAdd: String,
})
/**
 * 获取系统信息
 */
const statusHeight = ref(0)

onBackPress((o) => {
  console.log('from:' + o)
  return false
})
onLoad(async () => {
  articleList.value = await getLastYearToTodayDates()
  var index = props.mealIndex
  if (index !== '') {
    var num = Number(index) || 0
    mealIndex.value = num
    recordMealIndex.value = num
    recordIndex.value = num
  }
  var time = props.time
  if (time) {
    dateTime.value = time
    var list = articleList.value
    for (var i in list) {
      if (time == list[i].dateTime) {
        changeTime.value[0] = Number(i)
        changeRecordTime.value[0] = Number(i)
      }
    }
  } else {
    var list = articleList.value
    for (var i in list) {
      if (dateTime.value == list[i].dateTime) {
        changeTime.value[0] = Number(i)
        changeRecordTime.value[0] = Number(i)
      }
    }
  }
  getTypeList()
})
onShow(async () => {
  var mealDetail = uni.getStorageSync('addMeal')
  if (mealDetail) {
    itemList.value.splice(0, 0, {
      is_add: 0,
      del: false,
      mealDetail,
    })
    uni.removeStorageSync('addMeal')
  }
  nextTick(() => {
    getTypeList()
  })
})
const historyList = ref([])
async function getHistoryList() {
  var res = await ycDietDailyDiet({
    date: dateTime.value,
  })
  var index = recordIndex.value || 0
  historyList.value = res.data.data
  recordList.value = index ? res.data.data[index]?.list : res.data.data[0]?.list || []
  mealRecordNum.value = res.data.dietCount
}
async function getLastYearToTodayDates() {
  var res = await ycDietRecordStartDate({ type: 1 })
  var date = res.data.date ? res.data.date : newDateTime.value
  let today = new Date(date)
  let startDate = new Date(today.getFullYear(), 0, 1)
  let newday = new Date()
  let endDate = new Date(newday.getFullYear(), 11, 31)
  let dates = []
  while (startDate <= endDate) {
    let date1 = formatDate(startDate, 'YYYY/MM/DD')
    let date2 = formatDate(startDate, 'YYYY-MM-DD')
    if (newDateTime.value == date2) {
      dates.push({
        label: '今天',
        value: date2,
        dateTime: date2,
      })
    } else {
      dates.push({
        label: date1,
        value: date2,
        dateTime: date2,
      })
    }
    startDate.setDate(startDate.getDate() + 1)
  }
  return dates
}

function toBack() {
  uni.navigateBack({
    delta: 1,
  })
}
async function getTypeList() {
  var res = await ycDietCategory({
    date: dateTime.value,
    meal: Number(mealIndex.value) + 1,
  })
  if (res.code == 200) {
    articleType.value = res.data.data
    itemList.value = res.data.data[alideIndex.value].project
  }
  getHistoryList()
}
async function getList() {
  var index = Number(alideIndex.value)
  var list = articleType.value
  itemList.value = list[index].project
}

function getSystemInfo() {
  uni.getSystemInfo({
    success: (e) => {
      statusHeight.value = e.statusBarHeight * 2
    },
  })
}
getSystemInfo()

function ToSeeHistory() {
  recordShow.value = false
  navigateBack()
}

function getNum(num) {
  var aa = num
  if (Number(num > 99)) {
    aa = '99+'
  }
  return aa
}
const isUser = ref(0)
function bindAlide(index) {
  alideIndex.value = index
  var is_user = articleType.value[index].is_user
  isUser.value = is_user
  getList()
}
var checkListNum = 0

function toCheck(index, num) {
  checkListNum = num
  var list = (list = itemList.value)
  const row = list[index]
  addDetail.value = row
  mealNum.value = row.num_one.toString()
  addShow.value = true
  addIndex.value = index
  recordTime.value = dateTime.value
}

async function bindNum(e) {
  mealNum.value = ''
  var res = await ycDietAddDiet({
    id: addDetail.value.id,
    cate_id: articleType.value[alideIndex.value].cate_id,
    num: Number(e.num),
    date: recordTime.value,
    unit: e.unit,
    meal: Number(mealIndex.value) + 1,
  })
  if (recordTime.value == dateTime.value && mealIndex.value == recordMealIndex.value) {
    itemList.value[addIndex.value].is_add = 1
  }
  addShow.value = false
  getTypeList()
}
function openRecordTime() {
  headTimeShow.value = true
  addShow.value = false
}

function bindChangeTime(e) {
  changeTime.value = e.detail.value
}

function bindRecordChangeTime(e) {
  changeRecordTime.value = e.detail.value
}

function toBind() {
  var a = changeTime.value[0]
  var b = changeTime.value[1]
  dateTime.value = articleList.value[a].value
  mealIndex.value = b
  recordMealIndex.value = b
  timeShow.value = false
  getTypeList()
}

function toBindRecord() {
  var a = changeRecordTime.value[0]
  var b = changeRecordTime.value[1]
  recordTime.value = articleList.value[a].value
  recordMealIndex.value = b
  headTimeShow.value = false
  addShow.value = true
}
function closeTimeShow() {
  headTimeShow.value = false
  addShow.value = true
}
var startX = 0

function touchStart(e) {
  if (e.touches.length == 1) {
    //设置触摸起始点水平方向位置
    startX = e.touches[0].clientX
  }
}

function touchEndTab(e) {
  var index = Number(e.currentTarget.id)
  if (e.changedTouches.length == 1) {
    //手指移动结束后水平位置
    var endX = e.changedTouches[0].clientX
    let diff = endX - startX
    if (Math.abs(diff) > 40) {
      if (diff > 0) {
        console.log('右滑...')
        itemList.value[index].del = false
      } else {
        console.log('左滑...')
        itemList.value[index].del = true
      }
    }
  }
}

async function toDel(index, row) {
  var res = await ycDietDelCustomProject({
    id: row.id,
  })
  if (res.code == 200) {
    getTypeList()
    getHistoryList()
  }
  uni.showToast({
    title: res.msg,
    duration: 2000,
  })
}

function toSeeRecord() {
  if (mealRecordNum.value) {
    recordShow.value = !recordShow.value
  }
  if (recordIndex.value === '') {
    recordIndex.value = mealIndex.value
  }
}

function bindRecord(index, row) {
  recordIndex.value = index
  mealIndex.value = index
  getTypeList()
  recordList.value = historyList.value[index]?.list || []
}

async function toDelRecord(index, item) {
  var res = await ycDietDelRecord({
    id: item.id,
  })
  if (res.code == 200) {
    recordList.value.splice(index, 1)
    getHistoryList()
    getTypeList()
  }
  uni.showToast({
    title: res.msg,
    duration: 2000,
  })
}
async function submit() {
  uni.navigateTo({
    url: '/pregnancys/weight-management/diet-record/foods-and-sport?time=' + dateTime.value,
  })
}
//登录
function updateInfo() {
  const store = useMemberStore()
  token = store?.token
}
</script>

<style lang="scss">
page {
  background: #f5f0fc;
}
.picker_check {
  background-color: rgba(248, 242, 255, 0.3) !important;
  color: #000;
}
</style>

<style lang="scss" scoped>
.topCen {
  width: 350rpx;
  margin: 0 auto;
  height: 100%;
  z-index: 1;
  padding: 10rpx 0;
  box-sizing: border-box;
  .head_data {
    width: 100%;
    height: 64rpx;
    font-size: 36rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #333333;
    line-height: 64rpx;
    text-align: center;
    .head_data_img {
      width: 18rpx;
      height: 12rpx;
      margin-left: 10rpx;
      position: relative;
      top: -6rpx;
    }
  }
}

.section {
  width: 100%;
  height: calc(100vh - 204rpx);
  .sec_inp {
    width: 702rpx;
    height: 64rpx;
    background: #ffffff;
    border-radius: 32rpx;
    margin: 20rpx auto;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    line-height: 64rpx;
    image {
      width: 28rpx;
      height: 28rpx;
      float: left;
      margin: 16rpx 24rpx;
    }
  }
  .sec_box {
    width: 100%;
    background: #fff;
    height: calc(100% - 124rpx);
    .sec_alide {
      width: 204rpx;
      background: #f3eaff;
      float: left;
      height: 100%;
      overflow-y: scroll;
      box-sizing: border-box;
      padding-top: 70rpx;
      .sec_alide_list {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        line-height: 80rpx;
        text-align: center;
        height: 80rpx;
        width: 175rpx;
        box-sizing: border-box;
        padding-right: 29rpx;
        margin: 0 3rpx 0 29rpx;
        overflow: hidden;
        border-radius: 36rpx 0 0 36rpx;
      }
      .sec_alide_list_act {
        background: #fff !important;
        color: #8767ff !important;
      }
    }
    .sec_article {
      width: 546rpx;
      height: 100%;
      float: left;
      background: #fff;
      overflow-y: scroll;
      box-sizing: border-box;
      padding: 0 20rpx;
      .sec_article_title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        overflow: hidden;
        padding-top: 40rpx;
        .sec_article_title_add {
          float: right;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #8e70ff;
          line-height: 34rpx;
          image {
            float: left;
            width: 24rpx;
            height: 24rpx;
            float: left;
            margin: 0 5rpx;
            position: relative;
            top: 6rpx;
          }
        }
      }
      .sec_article_none {
        text-align: center;
        padding-top: 40%;
        image {
          width: 226rpx;
          height: 204rpx;
        }
        .sec_article_none_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #ababab;
          line-height: 40rpx;
          margin-top: 60rpx;
        }
      }
      .sec_article_list {
        border-bottom: 2rpx solid #f6f6f6;
        padding: 20rpx 0;
        position: relative;
        overflow: hidden;
        .sec_article_list_img {
          width: 83rpx;
          height: 83rpx;
          border-radius: 18rpx;
          float: left;
        }
        .sec_article_list_box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          width: 400rpx;
          float: right;
          .sec_article_list_box_l {
            max-width: 340rpx;
            .sec_article_list_box_l_t {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
              line-height: 40rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .sec_article_list_box_l_b {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #666666;
              line-height: 28rpx;
              line-height: 34rpx;
              margin-top: 9rpx;
            }
          }
          .sec_article_list_box_r {
            width: 44rpx;
            padding: 15rpx 0;
            image {
              width: 44rpx;
              height: 44rpx;
            }
          }
          .sec_article_list_box_del {
            width: 94rpx;
            height: 83rpx;
            background: #da180a;
            position: absolute;
            top: 20rpx;
            right: 0;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #ffffff;
            line-height: 83rpx;
            text-align: center;
          }
        }
      }
    }
  }
}

.record_box {
  border-radius: 20rpx 20rpx 0 0;
  height: 710rpx;
  overflow: hidden;
  .record_box_alide {
    width: 204rpx;
    background: #f3eaff;
    border-radius: 0 43rpx 0 0;
    float: left;
    height: calc(100% - 150rpx);
    overflow-y: scroll;
    box-sizing: border-box;
    padding-top: 70rpx;
    .record_box_alide_list {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 66rpx;
      text-align: center;
      height: 66rpx;
      width: 175rpx;
      box-sizing: border-box;
      padding-right: 29rpx;
      margin: 0 3rpx 0 29rpx;
      overflow: hidden;
      border-radius: 36rpx 0 0 36rpx;
    }
    .record_box_alide_list_act {
      background: #fff !important;
      color: #8767ff !important;
    }
  }
  .record_box_article {
    width: 546rpx;
    height: calc(100% - 150rpx);
    float: left;
    background: #fff;
    box-sizing: border-box;
    padding: 0 20rpx;
    .record_box_article_title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 50rpx;
      overflow: hidden;
      padding-top: 30rpx;
      .record_box_article_title_add {
        float: right;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #8e70ff;
        line-height: 34rpx;
        image {
          float: left;
          width: 24rpx;
          height: 24rpx;
          float: left;
          margin: 0 5rpx;
          position: relative;
          top: 6rpx;
        }
      }
    }
    .record_box_article_box {
      height: calc(100% - 80rpx);
      overflow-y: scroll;
      .record_box_article_list {
        border-bottom: 2rpx solid #f6f6f6;
        padding: 20rpx 0;
        position: relative;
        overflow: hidden;
        .record_box_article_list_img {
          width: 83rpx;
          height: 83rpx;
          border-radius: 16rpx;
          float: left;
        }
        .record_box_article_list_box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          width: 400rpx;
          float: right;
          .record_box_article_list_box_l {
            max-width: 340rpx;
            .record_box_article_list_box_l_t {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
              line-height: 40rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .record_box_article_list_box_l_b {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #666666;
              line-height: 28rpx;
              line-height: 34rpx;
              margin-top: 9rpx;
            }
          }
          .record_box_article_list_box_r {
            width: 44rpx;
            padding: 25rpx 0;
            image {
              width: 34rpx;
              height: 34rpx;
            }
          }
          .record_box_article_list_box_del {
            width: 96rpx;
            height: 83rpx;
            background: #da180a;
            position: absolute;
            top: 20rpx;
            right: 0;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #ffffff;
            line-height: 83rpx;
            text-align: center;
          }
        }
      }
      .record_box_article_list:last-of-type {
        border-bottom: none;
      }
      .record_box_article_box_none {
        text-align: center;
        image {
          width: 212rpx;
          height: 193rpx;
          margin-top: 170rpx;
        }
        .record_box_article_box_none_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 20rpx;
          color: #999999;
          line-height: 28rpx;
          padding-top: 30rpx;
        }
      }
    }
  }
}

.foot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 150rpx;
  background: #fff;
  box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(238, 238, 238, 0.25);
  .foot_l {
    width: 204rpx;
    float: left;
    text-align: center;
    box-sizing: border-box;
    padding: 49rpx 0;
    position: relative;
    height: 100%;
    .foot_l_num {
      position: absolute;
      top: 40rpx;
      left: 58rpx;
      background: #ff3939;
      padding: 0 6rpx;
      height: 16rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16rpx;
      color: #ffffff;
      line-height: 16rpx;
      border-radius: 8rpx;
    }
    .foot_l_img {
      width: 52rpx;
      height: 52rpx;
      margin-left: 24rpx;
      position: relative;
      top: -6rpx;
      float: left;
    }
    .foot_l_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 52rpx;
      text-align: center;
      margin-left: 10rpx;
      float: left;
    }
    .foot_l_jian {
      width: 20rpx;
      height: 20rpx;
      margin-left: 10rpx;
      margin-top: 16rpx;
      float: left;
    }
  }
  .foot_r {
    width: 546rpx;
    height: 100%;
    float: left;
    .foot_btn {
      width: 241rpx;
      height: 78rpx;
      background: linear-gradient(90deg, #cb9fff 0%, #a28aff 100%);
      border-radius: 78rpx;
      text-align: center;
      line-height: 78rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 28rpx;
      color: #ffffff;
      float: right;
      margin-right: 24rpx;
      margin-top: 35rpx;
    }
  }
}

.time_box {
  width: 100%;
  .time_box_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
    line-height: 33rpx;
    text-align: center;
    padding-top: 30rpx;
    padding-bottom: 20rpx;
    image {
      width: 18rpx;
      height: 12rpx;
      margin-left: 10rpx;
      position: relative;
      top: -6rpx;
    }
  }
  .picker-view {
    width: 750rpx;
    height: 500rpx;
  }
  .item {
    width: 375rpx;
    line-height: 85rpx;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
  }
  .time_box_btn {
    width: 702rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #cb9fff 0%, #a28aff 100%);
    border-radius: 44rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    margin: 50rpx auto;
  }
}
</style>
